<template>
  <div>
    <div v-loading="toLoad" v-if="Object.keys(orderInfo).length" class="description">
      <div class="title">收货信息</div>
      <div class="acea-row" v-if="orderInfo.user">
        <div class="description-term">用户昵称：{{ orderInfo.user.nickName }}</div>
        <div class="description-term">收货人：{{ orderInfo.consigneeName }}</div>
        <div class="description-term">联系电话：{{ orderInfo.consigneeMobile }}</div>
        <div class="description-term">收货地址：{{ orderInfo.consigneeAddress }}</div>
      </div>
      <el-divider />
      <div class="title">订单信息</div>
      <div class="acea-row">
        <div class="description-term">订单ID：{{ orderInfo.orderNo }}</div>
        <div v-if="(orderInfo.refundState == 0 || orderInfo.refundState == 2) && orderInfo.refundType == 0" class="description-term">订单状态：{{ orderInfo.refundState | payTypeFilter('refundState') }}</div>
        <div v-else class="description-term">订单状态：{{ orderInfo.state | payTypeFilter('state') }}</div>
        <div class="description-term">商品总数：{{ orderInfo.totalNum }}</div>
        <div class="description-term">商品总价：{{ orderInfo.totalPrice | NumFormat }}</div>
        <!--          <div class="description-term">支付邮费：{{orderDatalist.payPostage}}</div>-->
        <!--          <div class="description-term">优惠券金额：{{orderDatalist.couponPrice}}</div>-->
        <div class="description-term">交付邮费：{{ orderInfo.totalPostage | NumFormat }}</div>
        <div class="description-term">实际支付：{{ orderInfo.payPrice | NumFormat }}</div>
        <!--<div class="description-term fontColor3" v-if="orderDatalist.refundPrice">退款金额：{{orderDatalist.refundPrice}}</div>
        <div class="description-term" v-if="orderDatalist.useIntegral">使用积分：{{orderDatalist.useIntegral}}</div>
        <div class="description-term" v-if="orderDatalist.backIntegral">退回积分：{{orderDatalist.backIntegral}}</div>-->
        <div v-if="orderInfo.createDateUTC" class="description-term">创建时间：{{ orderInfo.createDateUTC | uctTimeFileter }}</div>
        <div v-if="orderInfo.payDateUTC" class="description-term">支付时间：{{ orderInfo.payDateUTC | uctTimeFileter }}</div>
        <div class="description-term">支付方式：{{ orderInfo.payType | payTypeFilter('payType') }}</div>
        <div v-if="orderInfo.promoter" class="description-term">推广人：{{ orderInfo.promoter }}</div>
        <!--<div class="description-term" v-if="orderDatalist.shippingType === 2 && orderDatalist.statusStr.key === 'notShipped'">门店名称：{{orderDatalist.storeName}}</div>
        <div class="description-term" v-if="orderDatalist.shippingType === 2 && orderDatalist.statusStr.key === 'notShipped'">核销码：{{orderDatalist.user_phone}}</div>-->
        <!--<div v-if="orderInfo.remark" class="description-term">用户备注：{{ orderInfo.remark }}</div>-->
        <!--<template v-if="orderDatalist.statusStr.key === 'toBeWrittenOff' && orderDatalist.systemStore">
          <div class="description-term">提货码：{{orderDatalist.verifyCode}}</div>
          <div class="description-term">门店名称：{{orderDatalist.systemStore.name}}</div>
          <div class="description-term">门店电话：{{orderDatalist.systemStore.phone}}</div>
          <div class="description-term">门店地址：{{orderDatalist.systemStore.address + orderDatalist.systemStore.detailedAddress}}</div>
        </template>-->
      </div>
      <template v-if="(orderInfo.refundState != 0 || orderInfo.refundState != 2) && orderInfo.refundType != 0">
        <el-divider />
        <div class="title">退款信息</div>
        <div class="acea-row">
          <div class="description-term">退款原因：{{ orderInfo.refundWapReason }}</div>
          <div class="description-term">退款状态：{{ orderInfo.refundState | payTypeFilter('refundState') }}</div>
          <el-col v-if="$util.splitArray(orderInfo.refundWapImg, ',').length" :span="12" style="display: flex;font-size: 12px;">
            退款凭证：
            <div class="tabBoxPic">
              <div v-for="(item, index) in $util.splitArray(orderInfo.refundWapImg, ',')" :key="index" v-viewer class="tabBox_img">
                <img v-lazy="$uploadURL(item)">
              </div>
            </div>
          </el-col>
          <div v-if="orderInfo.refundState === 0 && orderInfo.refundType > 0" class="description-term">不退款原因：{{ orderInfo.refundReason }}</div>
        </div>
      </template>
      <template v-if="orderInfo.deliveryType == 0 && [5, 6, 8].includes(orderInfo.state)">
        <el-divider />
        <div class="title">物流信息</div>
        <div class="acea-row">
          <div class="description-term">快递公司：{{ orderInfo.deliveryName }}</div>
          <div class="description-term">快递编码：{{ orderInfo.deliveryCode }}</div>
          <div class="description-term">快递单号：{{ orderInfo.deliveryNum }}<el-button type="primary" size="mini" style="margin-left: 5px" @click="openLogistics">物流查询</el-button></div>
        </div>
      </template>
      <template v-if="orderInfo.deliveryType == 1 && [5, 6, 8].includes(orderInfo.state)">
        <el-divider></el-divider>
        <div class="title">配送信息</div>
        <div class="acea-row">
          <div class="description-term">送货人姓名：{{orderInfo.deliveryName}}</div>
          <!-- 后端暂未返回 -->
          <div v-if="false" class="description-term">送货人电话：{{orderInfo.deliveryId}}</div>
        </div>
      </template>
      <template v-if="orderInfo.remark">
        <el-divider />
        <div class="title">备注信息</div>
        <div class="acea-row">
          <div class="description-term">{{ orderInfo.remark }}</div>
        </div>
      </template>
    </div>
    <el-dialog
      v-if="orderDatalist"
      title="提示"
      :visible.sync="modal2"
      width="30%"
    >
      <div class="logistics acea-row row-top">
        <div class="logistics_img"><img src="@/assets/images/expressi.jpg"></div>
        <div class="logistics_cent">
          <span class="mb10">物流公司：{{ orderDatalist.deliveryName }}</span>
          <span>物流单号：{{ orderDatalist.orderNo }}</span>
        </div>
      </div>
      <div class="acea-row row-column-around trees-coadd">
        <div class="scollhide">
          <el-timeline :reverse="reverse">
            <el-timeline-item v-for="(item,i) in result" :key="i">
              <p class="time" v-text="item.time" />
              <p class="content" v-text="item.status" />
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modal2 = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { orderDetailApi } from '@/api/order'

export default {
  name: 'Index',
  filters: {
    payTypeFilter(val, key) {
      if (key === 'payType') {
        const data = {
          0: '微信支付',
          1: '支付宝支付'
        }
        return data[val]
      } else if (key === 'state') {
        const data = {
          0: '订单已生成',
          1: '待支付',
          2: '支付失败',
          3: '订单取消',
          4: '待发货',
          5: '待确认收货',
          6: '待评价',
          7: '已退款',
          8: '交易成功'
        }
        return data[val]
      } else if (key === 'refundState') {
        const data = {
          1: '退款申请中',
          2: '拒绝退款',
          3: '商品待退货',
          4: '商品待收货',
          5: '已退款'
        }
        return data[val]
      }
    }
  },
  props: {
    orderId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      reverse: true,
      orderDatalist: null,
      toLoad: false,
      modal2: false,
      orderInfo: {},
      result: []
    }
  },
  computed: {
    // 订单详情
    /*orderInfo() {
      const order = this.orderDatalist

      return {
        // 物流信息
        logistics: {
          // 快递公司
          deliveryCode: order.deliveryCode,
          // 快递单号
          deliveryNum: order.deliveryNum
        },
        // 退款信息
        refund: {
          // 退款状态
          refundState: order.refundState,
          // 退款类型
          refundType: order.refundType,
          // 不退款原因
          refundReason: order.refundReason,
          // 退款原因
          refundWapReason: order.refundWapReason,
          // 用户退款图片
          refundWapImg: order.refundWapImg && order.refundWapImg.split(',') || []
        },
        // 订单信息
        info: {
          // 订单ID
          orderNo: order.orderNo,
          // 订单状态
          state: order.state,
          // 商品总数
          totalNum: order.orderItems.length > 0 && order.orderItems.reduce((x, y) => x + y.num, 0) || 0,
          // 商品总价
          totalPrice: order.orderItems.length > 0 && order.orderItems.reduce((x, y) => x + y.price, 0) || 0,
          // 实际支付
          payPrice: order.payPrice,
          // 创建时间
          createDateUTC: order.createDateUTC && $moment.utc(order.createDateUTC).tz($moment.tz.guess()).format('YYYY-MM-DD HH:mm:ss'),
          // 支付时间
          payDateUTC: order.payDateUTC && $moment.utc(order.payDateUTC).tz($moment.tz.guess()).format('YYYY-MM-DD HH:mm:ss'),
          // 支付方式
          payType: order.payType,
          // 推广人
          promoter: order.promoter || '',
          // 用户备注
          remark: order.remark
        },
        // 收货信息
        receivingUser: {
          // 用户信息
          nickName: order.user && order.user.nickName,
          // 联系电话
          mobile: order.consigneeMobile,
          // 收货人
          consigneeName: order.consigneeName,
          // 收货地址
          consigneeAddress: order.consigneeAddress
        }
      }
    }*/
  },
  created() {
    this.toInfo(this.orderId);
  },
  methods: {
    openLogistics() {
      window.location.href = 'https://m.kuaidi100.com/app/query/?nu=运单号&coname=meizu'
    },
    // 获取订单物流信息
    getOrderData() {
      this.$message.warning('暂时没有这个功能!')
      // 查询物流接口
      /* getLogisticsInfoApi({ orderNo: this.orderId }).then(async res => {
        this.result = res.list
      }).catch(() => {
        this.$message.warning('暂时没有这个功能!')
      })*/
    },
    toInfo(id) {
      this.$set(this, 'toLoad', true);
      orderDetailApi(id).then(res => {
        console.log("哈哈哈：", res);
        this.orderInfo = res;
        this.$set(this, 'toLoad', false);
      }).catch(() => {
        this.orderDatalist = {};
        this.$set(this, 'toLoad', false);
      })
    }
  }
};
</script>

<style scoped lang="scss">
  .logistics {
    align-items: center;
    padding: 10px 0px;
    .logistics_img {
      width: 45px;
      height: 45px;
      margin-right: 12px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .logistics_cent {
      span {
        display: block;
        font-size: 12px;
      }
    }
  }

  .trees-coadd {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;
    .scollhide {
      width: 100%;
      height: 100%;
      overflow: auto;
      margin-left: 18px;
      padding: 10px 0 10px 0;
      box-sizing: border-box;
      .content {
        font-size: 12px;
      }

      .time {
        font-size: 12px;
        color: #2d8cf0;
      }

    }
  }

  .title {
    margin-bottom: 10px;
    color: #17233d;
    font-weight: 500;
    font-size: 14px;
  }

  .description {
    &-term {
      display: table-cell;
      padding-bottom: 5px;
      line-height: 20px;
      width: 50%;
      font-size: 12px;
    }
    /*/deep/ .el-divider--horizontal {
      margin: 12px 0 !important;
    }*/
    .tabBoxPic {
      width: 50px;
      height: 50px;
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      .voucherImg {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          padding: 2px;
        }
      }
    }
  }

</style>
